<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Default Tree</h3>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <span ng-if="doingAsync">...loading...</span>
                        <abn-tree tree-data="myTreeData" tree-control="myTree" on-select="myTreeHandler(branch)"
                                  expand-level="2" initial-selection="Granny Smith"></abn-tree>
                    </div>
                    <div class="col-md-6">

                        <p class="btn-group">
                            <button ng-click="tryChangingTheTreeData()" class="btn btn-default btn-sm">Change The
                                Tree Definition
                            </button>
                            <button ng-click="tryAsyncLoad()" class="btn btn-default btn-sm">Load Tree Data
                                Asynchronously
                            </button>
                        </p>

                        <p class="btn-group">
                            <button ng-click="myTree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
                            <button ng-click="myTree.collapse_branch()" class="btn btn-default btn-sm">Collapse
                            </button>
                            <button ng-click="myTree.expandAll()" class="btn btn-default btn-sm">Expand All</button>
                            <button ng-click="myTree.collapse_all()" class="btn btn-default btn-sm">Collapse All
                            </button>
                        </p>


                        <p class="btn-group">
                            <button ng-click="myTree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
                            <button ng-click="tryAddingABranch()" class="btn btn-default btn-sm">Add Branch</button>
                            <button ng-click="myTree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
                        </p>
                        <p class="btn-group">
                            <button ng-click="myTree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
                            <button ng-click="myTree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
                            <button ng-click="myTree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
                            <button ng-click="myTree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
                        </p>

                        <div class="alert alert-warning">{{ output }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>